<template>
	<view>
		<uni-popup ref="sharePopup" @change="popupChange" type="bottom">
			<view class="content">
				<swiper class="scroll-view_H" @change="swiperChange" :indicator-dots="indicatorDots"
					indicator-color="#FF6E00">
					<swiper-item v-for="(item,index) in msgData.data" :key="index">
						<view class="card">
							<view class="card-bg">
								<image src="../../static/imgs/mine/close.png" @click="close" class="close-btn"></image>
								<l-painter isRenderImage :board="item.base" @success="baseSuccess($event,item)" />
							</view>
							<view class="card-title">
								<view class="card-title-msg">{{item.texts}}</view>
								<view class="card-title-tips">分享文案，已自动复制到剪切板</view>
							</view>
						</view>
					</swiper-item>

				</swiper>
				<view class="bottom">
					<view class="bottom-title">以上是分享图，您可以分享或保存图片</view>
					<view class="bottom-list">
						<view class="bottom-item" v-for="(item,index) in shareList" :key="index"
							@click="shareClick(item)">
							<image class="bottom-item-image" :src="item.img"></image>
							<view>{{item.title}}</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 权限弹框 -->
		<view class="quanxian" v-if="quanShow">
			<view class="">
				存储空间权限说明
			</view>
			<view class="">
				用于在添加、制作、上传、发布、分享、下载、搜索、识别图片和视频等场景中读取和写入相册和文件内容，
				拒绝将无法使用相关功能
			</view>
		</view>
	</view>
</template>

<script>
	import {
		inviteIndex
	} from "../../static/js/api/user.js";
	import uniPopup from "../uni-popup/uni-popup.vue";
	import uQRCode from "../tki-qrcode/qrcode.js";
	import lPainter from "../lime-painter/"
	export default {
		components: {
			uniPopup,
			lPainter
		},
		data() {
			return {
				indicatorDots: false,
				shareList: [{
					img: require('../../static/imgs/mine/pengyouquan.png'),
					title: '微信朋友圈',
					type: "WXSceneTimeline",
				}, {
					img: require('../../static/imgs/mine/wx.png'),
					title: '微信好友',
					type: "WXSceneSession"
				}, {
					img: require('../../static/imgs/mine/upload.png'),
					title: '保存图片',
					type: "savePicture"
				}],
				msgData: {},
				poster: '',
				base: {},
				swiperIndex: 0,
				quanShow: false,
			}
		},
		methods: {
			scroll: function(e) {
				console.log(e)
			},
			getData() {
				inviteIndex().then(res => {
					this.msgData = res
					console.log(res)
					if (this.msgData.data && this.msgData.data.length > 0) {
						this.indicatorDots = true
						this.msgData.data.forEach(item => {
							item.base = {
								width: '600rpx',
								height: '888rpx',
								views: [{
									type: 'image',
									src: item.images,
									mode: 'widthFix',
									css: {
										left: '0',
										top: '0',
										width: '600rpx',
										height: '888rpx',
										radius: '30rpx'
									}
								}, {
									type: 'qrcode',
									text: this.msgData.qr_code,
									css: {
										left: '75rpx',
										top: '600rpx',
										width: '100rpx',
										height: '100rpx',
										color: '#000000',
										backgroundColor: '#ffffff',
										borderRadius: '10rpx',
									}
								}, ]
							}
						})
					}
				})
			},
			baseSuccess(e, item) {
				// console.log(112,e)
				// console.log(113,item)
				uni.hideToast()
				item.poster = e
			},
			swiperChange(e) {
				console.log(117, e.detail.current)
				this.swiperIndex = e.detail.current

			},
			open() {
				uni.showToast({
					title: "正在加载...",
					icon: 'none'
				})
				this.$refs.sharePopup.open()
				this.getData()
			},
			close() {
				this.$refs.sharePopup.close()
			},
			popupChange(e) {
				if (e.show) {
					uni.hideTabBar()
				} else {
					setTimeout(() => {
						uni.showTabBar()
					}, 300)
				}
			},
			emptypopup() {
				// return false
			},
			shareClick(item) {
				let _this = this
				console.log(149, _this.msgData.data[_this.swiperIndex].poster)
				let system = uni.getSystemInfoSync();
				if (system.platform === 'android') {
					plus.android.requestPermissions(['android.permission.WRITE_EXTERNAL_STORAGE'], function(e) {
						if (e.deniedAlways.length > 0) { //权限被永久拒绝
							_this.quanShow = false
						}
						if (e.deniedPresent.length > 0) { //权限被临时拒绝
							_this.quanShow = false
						}
						if (e.granted.length > 0) {
							_this.quanShow = false //权限被允许
							if (item.type != 'savePicture') {
								uni.saveImageToPhotosAlbum({
									filePath: _this.msgData.data[_this.swiperIndex].poster,
									success(res) {
										console.log(158, res)
										uni.setClipboardData({
											data: _this.msgData.data[_this.swiperIndex].texts,
											success: function() {
												uni.share({
													provider: "weixin",
													scene: item.type,
													type: 2,
													imageUrl: res.path,
													success: function(resp) {
														console.log("success:" +
															JSON
															.stringify(resp));
													},
													fail: function(err) {
														console.log("fail:" + JSON
															.stringify(err));
													}
												});
											}
										});

									},
									fail(e) {
										uni.showModal({
											content: "保存相册失败，errCode：" + e.errCode +
												"，errMsg：" + e.errMsg +
												"，errSubject：" + e.errSubject,
											showCancel: false
										});
									}
								})
							} else {
								uni.saveImageToPhotosAlbum({
									filePath: _this.msgData.data[_this.swiperIndex].poster,
									success() {
										uni.setClipboardData({
											data: _this.msgData.data[_this.swiperIndex].texts,
											success: function() {
												console.log(169)
												uni.showToast({
													icon: "none",
													title: "图片保存成功，请到手机相册查看"
												})
											}
										});
									},
									fail(e) {
										uni.showModal({
											content: "保存相册失败，errCode：" + e.errCode +
												"，errMsg：" + e.errMsg +
												"，errSubject：" + e.errSubject,
											showCancel: false
										});
									}
								})
							}
						}
					})
				} else {
					if (item.type != 'savePicture') {
						uni.saveImageToPhotosAlbum({
							filePath: _this.msgData.data[_this.swiperIndex].poster,
							success(res) {
								console.log(158, res)
								uni.setClipboardData({
									data: _this.msgData.data[_this.swiperIndex].texts,
									success: function() {
										uni.share({
											provider: "weixin",
											scene: item.type,
											type: 2,
											imageUrl: res.path,
											success: function(resp) {
												console.log("success:" + JSON
													.stringify(resp));
											},
											fail: function(err) {
												console.log("fail:" + JSON
													.stringify(err));
											}
										});
									}
								});

							},
							fail(e) {
								uni.showModal({
									content: "保存相册失败，errCode：" + e.errCode +
										"，errMsg：" + e.errMsg +
										"，errSubject：" + e.errSubject,
									showCancel: false
								});
							}
						})
					} else {
						uni.saveImageToPhotosAlbum({
							filePath: _this.msgData.data[_this.swiperIndex].poster,
							success() {
								uni.setClipboardData({
									data: _this.msgData.data[_this.swiperIndex].texts,
									success: function() {
										console.log(169)
										uni.showToast({
											icon: "none",
											title: "图片保存成功，请到手机相册查看"
										})
									}
								});
							},
							fail(e) {
								uni.showModal({
									content: "保存相册失败，errCode：" + e.errCode +
										"，errMsg：" + e.errMsg +
										"，errSubject：" + e.errSubject,
									showCancel: false
								});
							}
						})
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.quanxian {
		background: #fff;
		padding: 24rpx;
		border-radius: 26rpx;
		position: fixed;
		top: 200rpx;
		left: 24rpx;
		right: 24rpx;

		view:first-child {
			font-size: 32rpx;
			color: #000;
			font-weight: bold;
		}

		view:last-child {
			font-size: 28rpx;
			color: #555;
			margin-top: 14rpx;
			line-height: 30rpx;
		}
	}

	.content {
		z-index: 999;
		position: fixed;
		width: 100vw;
		// height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		bottom: 0;
		left: 0;

		.close-btn {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			z-index: 999;
		}

		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
			height: 1052rpx !important;
		}

		.card {
			display: inline-block;
			width: 100%;
			padding-left: 75rpx;
		}

		.card-bg {
			width: 600rpx;
			height: 888rpx;
			border-radius: 10rpx;
			position: relative;
			background-size: 100% 100%;
			background-repeat: no-repeat;

			&-qrcode {
				width: 66px;
				height: 66px;
				position: absolute;
				left: 60rpx;
				bottom: 176rpx;
			}
		}

		.card-title {
			width: 600rpx;
			height: 152rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin-top: 12rpx;
			white-space: normal;

			&-msg {
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
				padding: 14rpx 30rpx 10rpx;
			}

			&-tips {
				font-size: 20rpx;
				font-weight: 400;
				color: #7A7A7A;
				line-height: 40rpx;
				text-align: center;
			}
		}

		.bottom {
			// position: fixed;
			// bottom: 0;
			// left: 0;
			width: 100vw;
			min-height: 242rpx;
			background-color: #F5F5F5;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);

			&-title {
				text-align: center;
				font-size: 24rpx;
				font-weight: 400;
				color: #7A7A7A;
				line-height: 34rpx;
				padding-top: 18rpx;
			}

			&-list {
				display: flex;
				justify-content: space-around;
				margin-top: 30rpx;

			}

			&-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				&-image {
					width: 84rpx !important;
					height: 84rpx !important;
					margin-bottom: 8rpx;
				}
			}
		}
	}
</style>